<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li class="active"><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0Immutable详解及 React中实践">Immutable详解及 React中实践</a><ul><li><a href="#t1什么是 Immutable Data">什么是 Immutable Data</a><ul><li><a href="#t2immutable.js">immutable.js</a></li><li><a href="#t3Immutable.is">Immutable.is</a></li></ul></li><li><a href="#t4Cursor 的概念">Cursor 的概念</a></li><li><a href="#t5与 React 搭配使用，Pure Render">与 React 搭配使用，Pure Render</a></li><li><a href="#t6与 Flux 搭配使用">与 Flux 搭配使用</a></li><li><a href="#t7与 Redux 搭配使用">与 Redux 搭配使用</a></li><li><a href="#t8总结">总结</a></li><li><a href="#t9资源">资源</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0Immutable&#x8BE6;&#x89E3;&#x53CA; React&#x4E2D;&#x5B9E;&#x8DF5;">Immutable&#x8BE6;&#x89E3;&#x53CA; React&#x4E2D;&#x5B9E;&#x8DF5; <a href="#t0Immutable&#x8BE6;&#x89E3;&#x53CA; React&#x4E2D;&#x5B9E;&#x8DF5;"> # </a></h1>
<p>&#x6709;&#x4EBA;&#x8BF4; Immutable &#x53EF;&#x4EE5;&#x7ED9; React &#x5E94;&#x7528;&#x5E26;&#x6765;&#x6570;&#x5341;&#x500D;&#x7684;&#x63D0;&#x5347;&#xFF0C;&#x4E5F;&#x6709;&#x4EBA;&#x8BF4; Immutable &#x7684;&#x5F15;&#x5165;&#x662F;&#x8FD1;&#x671F; JavaScript &#x4E2D;&#x4F1F;&#x5927;&#x7684;&#x53D1;&#x660E;&#xFF0C;&#x56E0;&#x4E3A;&#x540C;&#x671F; React &#x592A;&#x706B;&#xFF0C;&#x5B83;&#x7684;&#x5149;&#x8292;&#x88AB;&#x63A9;&#x76D6;&#x4E86;&#x3002;&#x8FD9;&#x4E9B;&#x81F3;&#x5C11;&#x8BF4;&#x660E; Immutable &#x662F;&#x5F88;&#x6709;&#x4EF7;&#x503C;&#x7684;&#xFF0C;&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x6765;&#x4E00;&#x63A2;&#x7A76;&#x7ADF;&#x3002;</p>
<p>JavaScript &#x4E2D;&#x7684;&#x5BF9;&#x8C61;&#x4E00;&#x822C;&#x662F;&#x53EF;&#x53D8;&#x7684;&#xFF08;Mutable&#xFF09;&#xFF0C;&#x56E0;&#x4E3A;&#x4F7F;&#x7528;&#x4E86;&#x5F15;&#x7528;&#x8D4B;&#x503C;&#xFF0C;&#x65B0;&#x7684;&#x5BF9;&#x8C61;&#x7B80;&#x5355;&#x7684;&#x5F15;&#x7528;&#x4E86;&#x539F;&#x59CB;&#x5BF9;&#x8C61;&#xFF0C;&#x6539;&#x53D8;&#x65B0;&#x7684;&#x5BF9;&#x8C61;&#x5C06;&#x5F71;&#x54CD;&#x5230;&#x539F;&#x59CB;&#x5BF9;&#x8C61;&#x3002;&#x5982; foo={a: 1}; bar=foo; bar.a=2 &#x4F60;&#x4F1A;&#x53D1;&#x73B0;&#x6B64;&#x65F6; foo.a &#x4E5F;&#x88AB;&#x6539;&#x6210;&#x4E86; 2&#x3002;&#x867D;&#x7136;&#x8FD9;&#x6837;&#x505A;&#x53EF;&#x4EE5;&#x8282;&#x7EA6;&#x5185;&#x5B58;&#xFF0C;&#x4F46;&#x5F53;&#x5E94;&#x7528;&#x590D;&#x6742;&#x540E;&#xFF0C;&#x8FD9;&#x5C31;&#x9020;&#x6210;&#x4E86;&#x975E;&#x5E38;&#x5927;&#x7684;&#x9690;&#x60A3;&#xFF0C;Mutable &#x5E26;&#x6765;&#x7684;&#x4F18;&#x70B9;&#x53D8;&#x5F97;&#x5F97;&#x4E0D;&#x507F;&#x5931;&#x3002;&#x4E3A;&#x4E86;&#x89E3;&#x51B3;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;&#x4E00;&#x822C;&#x7684;&#x505A;&#x6CD5;&#x662F;&#x4F7F;&#x7528; shallowCopy&#xFF08;&#x6D45;&#x62F7;&#x8D1D;&#xFF09;&#x6216; deepCopy&#xFF08;&#x6DF1;&#x62F7;&#x8D1D;&#xFF09;&#x6765;&#x907F;&#x514D;&#x88AB;&#x4FEE;&#x6539;&#xFF0C;&#x4F46;&#x8FD9;&#x6837;&#x505A;&#x9020;&#x6210;&#x4E86; CPU &#x548C;&#x5185;&#x5B58;&#x7684;&#x6D6A;&#x8D39;&#x3002;</p>
<p>Immutable &#x53EF;&#x4EE5;&#x5F88;&#x597D;&#x5730;&#x89E3;&#x51B3;&#x8FD9;&#x4E9B;&#x95EE;&#x9898;&#x3002;</p>
<h2 id="t1&#x4EC0;&#x4E48;&#x662F; Immutable Data">&#x4EC0;&#x4E48;&#x662F; Immutable Data <a href="#t1&#x4EC0;&#x4E48;&#x662F; Immutable Data"> # </a></h2>
<p>Immutable Data &#x5C31;&#x662F;&#x4E00;&#x65E6;&#x521B;&#x5EFA;&#xFF0C;&#x5C31;&#x4E0D;&#x80FD;&#x518D;&#x88AB;&#x66F4;&#x6539;&#x7684;&#x6570;&#x636E;&#x3002;&#x5BF9; Immutable &#x5BF9;&#x8C61;&#x7684;&#x4EFB;&#x4F55;&#x4FEE;&#x6539;&#x6216;&#x6DFB;&#x52A0;&#x5220;&#x9664;&#x64CD;&#x4F5C;&#x90FD;&#x4F1A;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x65B0;&#x7684; Immutable &#x5BF9;&#x8C61;&#x3002;Immutable &#x5B9E;&#x73B0;&#x7684;&#x539F;&#x7406;&#x662F; Persistent Data Structure&#xFF08;&#x6301;&#x4E45;&#x5316;&#x6570;&#x636E;&#x7ED3;&#x6784;&#xFF09;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x4F7F;&#x7528;&#x65E7;&#x6570;&#x636E;&#x521B;&#x5EFA;&#x65B0;&#x6570;&#x636E;&#x65F6;&#xFF0C;&#x8981;&#x4FDD;&#x8BC1;&#x65E7;&#x6570;&#x636E;&#x540C;&#x65F6;&#x53EF;&#x7528;&#x4E14;&#x4E0D;&#x53D8;&#x3002;&#x540C;&#x65F6;&#x4E3A;&#x4E86;&#x907F;&#x514D; deepCopy &#x628A;&#x6240;&#x6709;&#x8282;&#x70B9;&#x90FD;&#x590D;&#x5236;&#x4E00;&#x904D;&#x5E26;&#x6765;&#x7684;&#x6027;&#x80FD;&#x635F;&#x8017;&#xFF0C;Immutable &#x4F7F;&#x7528;&#x4E86; Structural Sharing&#xFF08;&#x7ED3;&#x6784;&#x5171;&#x4EAB;&#xFF09;&#xFF0C;&#x5373;&#x5982;&#x679C;&#x5BF9;&#x8C61;&#x6811;&#x4E2D;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x53EA;&#x4FEE;&#x6539;&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x548C;&#x53D7;&#x5B83;&#x5F71;&#x54CD;&#x7684;&#x7236;&#x8282;&#x70B9;&#xFF0C;&#x5176;&#x5B83;&#x8282;&#x70B9;&#x5219;&#x8FDB;&#x884C;&#x5171;&#x4EAB;&#x3002;</p>
<p>&#x76EE;&#x524D;&#x6D41;&#x884C;&#x7684; Immutable &#x5E93;&#x6709;&#x4E24;&#x4E2A;&#xFF1A;</p>
<h3 id="t2immutable.js">immutable.js <a href="#t2immutable.js"> # </a></h3>
<p>Facebook &#x5DE5;&#x7A0B;&#x5E08; Lee Byron &#x82B1;&#x8D39; 3 &#x5E74;&#x65F6;&#x95F4;&#x6253;&#x9020;&#xFF0C;&#x4E0E; React &#x540C;&#x671F;&#x51FA;&#x73B0;&#xFF0C;&#x4F46;&#x6CA1;&#x6709;&#x88AB;&#x9ED8;&#x8BA4;&#x653E;&#x5230; React &#x5DE5;&#x5177;&#x96C6;&#x91CC;&#xFF08;React &#x63D0;&#x4F9B;&#x4E86;&#x7B80;&#x5316;&#x7684; Helper&#xFF09;&#x3002;&#x5B83;&#x5185;&#x90E8;&#x5B9E;&#x73B0;&#x4E86;&#x4E00;&#x5957;&#x5B8C;&#x6574;&#x7684; Persistent Data Structure&#xFF0C;&#x8FD8;&#x6709;&#x5F88;&#x591A;&#x6613;&#x7528;&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x3002;&#x50CF; Collection&#x3001;List&#x3001;Map&#x3001;Set&#x3001;Record&#x3001;Seq&#x3002;&#x6709;&#x975E;&#x5E38;&#x5168;&#x9762;&#x7684;map&#x3001;filter&#x3001;groupBy&#x3001;reducefind&#x51FD;&#x6570;&#x5F0F;&#x64CD;&#x4F5C;&#x65B9;&#x6CD5;&#x3002;&#x540C;&#x65F6; API &#x4E5F;&#x5C3D;&#x91CF;&#x4E0E; Object &#x6216; Array &#x7C7B;&#x4F3C;&#x3002;</p>
<p>&#x5176;&#x4E2D;&#x6709; 3 &#x79CD;&#x6700;&#x91CD;&#x8981;&#x7684;&#x6570;&#x636E;&#x7ED3;&#x6784;&#x8BF4;&#x660E;&#x4E00;&#x4E0B;&#xFF1A;&#xFF08;Java &#x7A0B;&#x5E8F;&#x5458;&#x5E94;&#x8BE5;&#x6700;&#x719F;&#x6089;&#x4E86;&#xFF09;</p>
<ul>
<li>Map&#xFF1A;&#x952E;&#x503C;&#x5BF9;&#x96C6;&#x5408;&#xFF0C;&#x5BF9;&#x5E94;&#x4E8E; Object&#xFF0C;ES6 &#x4E5F;&#x6709;&#x4E13;&#x95E8;&#x7684; Map &#x5BF9;&#x8C61;</li>
<li>List&#xFF1A;&#x6709;&#x5E8F;&#x53EF;&#x91CD;&#x590D;&#x7684;&#x5217;&#x8868;&#xFF0C;&#x5BF9;&#x5E94;&#x4E8E; Array</li>
<li>Set&#xFF1A;&#x65E0;&#x5E8F;&#x4E14;&#x4E0D;&#x53EF;&#x91CD;&#x590D;&#x7684;&#x5217;&#x8868;
seamless-immutable</li>
</ul>
<p>&#x4E0E; Immutable.js &#x5B66;&#x9662;&#x6D3E;&#x7684;&#x98CE;&#x683C;&#x4E0D;&#x540C;&#xFF0C;seamless-immutable &#x5E76;&#x6CA1;&#x6709;&#x5B9E;&#x73B0;&#x5B8C;&#x6574;&#x7684; Persistent Data Structure&#xFF0C;&#x800C;&#x662F;&#x4F7F;&#x7528; Object.defineProperty&#xFF08;&#x56E0;&#x6B64;&#x53EA;&#x80FD;&#x5728; IE9 &#x53CA;&#x4EE5;&#x4E0A;&#x4F7F;&#x7528;&#xFF09;&#x6269;&#x5C55;&#x4E86; JavaScript &#x7684; Array &#x548C; Object &#x5BF9;&#x8C61;&#x6765;&#x5B9E;&#x73B0;&#xFF0C;&#x53EA;&#x652F;&#x6301; Array &#x548C; Object &#x4E24;&#x79CD;&#x6570;&#x636E;&#x7C7B;&#x578B;&#xFF0C;API &#x57FA;&#x4E8E;&#x4E0E; Array &#x548C; Object &#x64CD;&#x6301;&#x4E0D;&#x53D8;&#x3002;&#x4EE3;&#x7801;&#x5E93;&#x975E;&#x5E38;&#x5C0F;&#xFF0C;&#x538B;&#x7F29;&#x540E;&#x4E0B;&#x8F7D;&#x53EA;&#x6709; 2K&#x3002;&#x800C; Immutable.js &#x538B;&#x7F29;&#x540E;&#x4E0B;&#x8F7D;&#x6709; 16K&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x4E0A;&#x4EE3;&#x7801;&#x6765;&#x611F;&#x53D7;&#x4E00;&#x4E0B;&#x4E24;&#x8005;&#x7684;&#x4E0D;&#x540C;&#xFF1A;</p>
<pre><code>// &#x539F;&#x6765;&#x7684;&#x5199;&#x6CD5;
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b);  // &#x6253;&#x5370; 2
console.log(foo === bar);  //  &#x6253;&#x5370; true

// &#x4F7F;&#x7528; immutable.js &#x540E;
import Immutable from &apos;immutable&apos;;
foo = Immutable.fromJS({a: {b: 1}});
bar = foo.setIn([&apos;a&apos;, &apos;b&apos;], 2);   // &#x4F7F;&#x7528; setIn &#x8D4B;&#x503C;
console.log(foo.getIn([&apos;a&apos;, &apos;b&apos;]));  // &#x4F7F;&#x7528; getIn &#x53D6;&#x503C;&#xFF0C;&#x6253;&#x5370; 1
console.log(foo === bar);  //  &#x6253;&#x5370; false

// &#x4F7F;&#x7528;  seamless-immutable.js &#x540E;
import SImmutable from &apos;seamless-immutable&apos;;
foo = SImmutable({a: {b: 1}})
bar = foo.merge({a: { b: 2}})   // &#x4F7F;&#x7528; merge &#x8D4B;&#x503C;
console.log(foo.a.b);  // &#x50CF;&#x539F;&#x751F; Object &#x4E00;&#x6837;&#x53D6;&#x503C;&#xFF0C;&#x6253;&#x5370; 1
console.log(foo === bar);  //  &#x6253;&#x5370; false
</code></pre><blockquote>
<p>Immutable &#x4F18;&#x70B9;</p>
</blockquote>
<ol>
<li>Immutable &#x964D;&#x4F4E;&#x4E86; Mutable &#x5E26;&#x6765;&#x7684;&#x590D;&#x6742;&#x5EA6;</li>
</ol>
<p>&#x53EF;&#x53D8;&#xFF08;Mutable&#xFF09;&#x6570;&#x636E;&#x8026;&#x5408;&#x4E86; Time &#x548C; Value &#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x9020;&#x6210;&#x4E86;&#x6570;&#x636E;&#x5F88;&#x96BE;&#x88AB;&#x56DE;&#x6EAF;&#x3002;</p>
<p>&#x6BD4;&#x5982;&#x4E0B;&#x9762;&#x4E00;&#x6BB5;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code>function touchAndLog(touchFn) {
  let data = { key: &apos;value&apos; };
  touchFn(data);
  console.log(data.key); // &#x731C;&#x731C;&#x4F1A;&#x6253;&#x5370;&#x4EC0;&#x4E48;&#xFF1F;
}
</code></pre><p>&#x5728;&#x4E0D;&#x67E5;&#x770B; touchFn &#x7684;&#x4EE3;&#x7801;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x56E0;&#x4E3A;&#x4E0D;&#x786E;&#x5B9A;&#x5B83;&#x5BF9; data &#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF0C;&#x4F60;&#x662F;&#x4E0D;&#x53EF;&#x80FD;&#x77E5;&#x9053;&#x4F1A;&#x6253;&#x5370;&#x4EC0;&#x4E48;&#xFF08;&#x8FD9;&#x4E0D;&#x662F;&#x5E9F;&#x8BDD;&#x5417;&#xFF09;&#x3002;&#x4F46;&#x5982;&#x679C; data &#x662F; Immutable &#x7684;&#x5462;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x5F88;&#x80AF;&#x5B9A;&#x7684;&#x77E5;&#x9053;&#x6253;&#x5370;&#x7684;&#x662F; value&#x3002;</p>
<ol>
<li>&#x8282;&#x7701;&#x5185;&#x5B58;</li>
</ol>
<p>Immutable.js &#x4F7F;&#x7528;&#x4E86; Structure Sharing &#x4F1A;&#x5C3D;&#x91CF;&#x590D;&#x7528;&#x5185;&#x5B58;&#xFF0C;&#x751A;&#x81F3;&#x4EE5;&#x524D;&#x4F7F;&#x7528;&#x7684;&#x5BF9;&#x8C61;&#x4E5F;&#x53EF;&#x4EE5;&#x518D;&#x6B21;&#x88AB;&#x590D;&#x7528;&#x3002;&#x6CA1;&#x6709;&#x88AB;&#x5F15;&#x7528;&#x7684;&#x5BF9;&#x8C61;&#x4F1A;&#x88AB;&#x5783;&#x573E;&#x56DE;&#x6536;&#x3002;</p>
<pre><code>import { Map} from &apos;immutable&apos;;
let a = Map({
  select: &apos;users&apos;,
  filter: Map({ name: &apos;Cam&apos; })
})
let b = a.set(&apos;select&apos;, &apos;people&apos;);

a === b; // false
a.get(&apos;filter&apos;) === b.get(&apos;filter&apos;); // true
</code></pre><p>&#x4E0A;&#x9762; a &#x548C; b &#x5171;&#x4EAB;&#x4E86;&#x6CA1;&#x6709;&#x53D8;&#x5316;&#x7684; filter &#x8282;&#x70B9;&#x3002;</p>
<ol>
<li>Undo/Redo&#xFF0C;Copy/Paste&#xFF0C;&#x751A;&#x81F3;&#x65F6;&#x95F4;&#x65C5;&#x884C;&#x8FD9;&#x4E9B;&#x529F;&#x80FD;&#x505A;&#x8D77;&#x6765;&#x5C0F;&#x83DC;&#x4E00;&#x789F;</li>
</ol>
<p>&#x56E0;&#x4E3A;&#x6BCF;&#x6B21;&#x6570;&#x636E;&#x90FD;&#x662F;&#x4E0D;&#x4E00;&#x6837;&#x7684;&#xFF0C;&#x53EA;&#x8981;&#x628A;&#x8FD9;&#x4E9B;&#x6570;&#x636E;&#x653E;&#x5230;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#x91CC;&#x50A8;&#x5B58;&#x8D77;&#x6765;&#xFF0C;&#x60F3;&#x56DE;&#x9000;&#x5230;&#x54EA;&#x91CC;&#x5C31;&#x62FF;&#x51FA;&#x5BF9;&#x5E94;&#x6570;&#x636E;&#x5373;&#x53EF;&#xFF0C;&#x5F88;&#x5BB9;&#x6613;&#x5F00;&#x53D1;&#x51FA;&#x64A4;&#x9500;&#x91CD;&#x505A;&#x8FD9;&#x79CD;&#x529F;&#x80FD;&#x3002;</p>
<p>&#x540E;&#x9762;&#x6211;&#x4F1A;&#x63D0;&#x4F9B; Flux &#x505A; Undo &#x7684;&#x793A;&#x4F8B;&#x3002;</p>
<ol>
<li>&#x5E76;&#x53D1;&#x5B89;&#x5168;</li>
</ol>
<p>&#x4F20;&#x7EDF;&#x7684;&#x5E76;&#x53D1;&#x975E;&#x5E38;&#x96BE;&#x505A;&#xFF0C;&#x56E0;&#x4E3A;&#x8981;&#x5904;&#x7406;&#x5404;&#x79CD;&#x6570;&#x636E;&#x4E0D;&#x4E00;&#x81F4;&#x95EE;&#x9898;&#xFF0C;&#x56E0;&#x6B64;&#x300E;&#x806A;&#x660E;&#x4EBA;&#x300F;&#x53D1;&#x660E;&#x4E86;&#x5404;&#x79CD;&#x9501;&#x6765;&#x89E3;&#x51B3;&#x3002;&#x4F46;&#x4F7F;&#x7528;&#x4E86; Immutable &#x4E4B;&#x540E;&#xFF0C;&#x6570;&#x636E;&#x5929;&#x751F;&#x662F;&#x4E0D;&#x53EF;&#x53D8;&#x7684;&#xFF0C;&#x5E76;&#x53D1;&#x9501;&#x5C31;&#x4E0D;&#x9700;&#x8981;&#x4E86;&#x3002;</p>
<p>&#x7136;&#x800C;&#x73B0;&#x5728;&#x5E76;&#x6CA1;&#x4EC0;&#x4E48;&#x5375;&#x7528;&#xFF0C;&#x56E0;&#x4E3A; JavaScript &#x8FD8;&#x662F;&#x5355;&#x7EBF;&#x7A0B;&#x8FD0;&#x884C;&#x7684;&#x554A;&#x3002;&#x4F46;&#x672A;&#x6765;&#x53EF;&#x80FD;&#x4F1A;&#x52A0;&#x5165;&#xFF0C;&#x63D0;&#x524D;&#x89E3;&#x51B3;&#x672A;&#x6765;&#x7684;&#x95EE;&#x9898;&#x4E0D;&#x4E5F;&#x633A;&#x597D;&#x5417;&#xFF1F;</p>
<ol>
<li>&#x62E5;&#x62B1;&#x51FD;&#x6570;&#x5F0F;&#x7F16;&#x7A0B;</li>
</ol>
<p>Immutable &#x672C;&#x8EAB;&#x5C31;&#x662F;&#x51FD;&#x6570;&#x5F0F;&#x7F16;&#x7A0B;&#x4E2D;&#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x7EAF;&#x51FD;&#x6570;&#x5F0F;&#x7F16;&#x7A0B;&#x6BD4;&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x66F4;&#x9002;&#x7528;&#x4E8E;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x3002;&#x56E0;&#x4E3A;&#x53EA;&#x8981;&#x8F93;&#x5165;&#x4E00;&#x81F4;&#xFF0C;&#x8F93;&#x51FA;&#x5FC5;&#x7136;&#x4E00;&#x81F4;&#xFF0C;&#x8FD9;&#x6837;&#x5F00;&#x53D1;&#x7684;&#x7EC4;&#x4EF6;&#x66F4;&#x6613;&#x4E8E;&#x8C03;&#x8BD5;&#x548C;&#x7EC4;&#x88C5;&#x3002;</p>
<p>&#x50CF; ClojureScript&#xFF0C;Elm &#x7B49;&#x51FD;&#x6570;&#x5F0F;&#x7F16;&#x7A0B;&#x8BED;&#x8A00;&#x4E2D;&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x5929;&#x751F;&#x90FD;&#x662F; Immutable &#x7684;&#xFF0C;&#x8FD9;&#x4E5F;&#x662F;&#x4E3A;&#x4EC0;&#x4E48; ClojureScript &#x57FA;&#x4E8E; React &#x7684;&#x6846;&#x67B6; --- Om &#x6027;&#x80FD;&#x6BD4; React &#x8FD8;&#x8981;&#x597D;&#x7684;&#x539F;&#x56E0;&#x3002;</p>
<blockquote>
<p>Immutable &#x7F3A;&#x70B9;</p>
</blockquote>
<ol>
<li>&#x9700;&#x8981;&#x5B66;&#x4E60;&#x65B0;&#x7684; API</li>
</ol>
<p>No Comments</p>
<ol>
<li>&#x589E;&#x52A0;&#x4E86;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x5927;&#x5C0F;</li>
</ol>
<p>No Comments</p>
<ol>
<li>&#x5BB9;&#x6613;&#x4E0E;&#x539F;&#x751F;&#x5BF9;&#x8C61;&#x6DF7;&#x6DC6;</li>
</ol>
<p>&#x8FD9;&#x70B9;&#x662F;&#x6211;&#x4EEC;&#x4F7F;&#x7528; Immutable.js &#x8FC7;&#x7A0B;&#x4E2D;&#x9047;&#x5230;&#x6700;&#x5927;&#x7684;&#x95EE;&#x9898;&#x3002;&#x5199;&#x4EE3;&#x7801;&#x8981;&#x505A;&#x601D;&#x7EF4;&#x4E0A;&#x7684;&#x8F6C;&#x53D8;&#x3002;</p>
<p>&#x867D;&#x7136; Immutable.js &#x5C3D;&#x91CF;&#x5C1D;&#x8BD5;&#x628A; API &#x8BBE;&#x8BA1;&#x7684;&#x539F;&#x751F;&#x5BF9;&#x8C61;&#x7C7B;&#x4F3C;&#xFF0C;&#x6709;&#x7684;&#x65F6;&#x5019;&#x8FD8;&#x662F;&#x5F88;&#x96BE;&#x533A;&#x522B;&#x5230;&#x5E95;&#x662F; Immutable &#x5BF9;&#x8C61;&#x8FD8;&#x662F;&#x539F;&#x751F;&#x5BF9;&#x8C61;&#xFF0C;&#x5BB9;&#x6613;&#x6DF7;&#x6DC6;&#x64CD;&#x4F5C;&#x3002;</p>
<p>Immutable &#x4E2D;&#x7684; Map &#x548C; List &#x867D;&#x5BF9;&#x5E94;&#x539F;&#x751F; Object &#x548C; Array&#xFF0C;&#x4F46;&#x64CD;&#x4F5C;&#x975E;&#x5E38;&#x4E0D;&#x540C;&#xFF0C;&#x6BD4;&#x5982;&#x4F60;&#x8981;&#x7528; map.get(&apos;key&apos;) &#x800C;&#x4E0D;&#x662F; map.key&#xFF0C;array.get(0) &#x800C;&#x4E0D;&#x662F; array[0]&#x3002;&#x53E6;&#x5916; Immutable &#x6BCF;&#x6B21;&#x4FEE;&#x6539;&#x90FD;&#x4F1A;&#x8FD4;&#x56DE;&#x65B0;&#x5BF9;&#x8C61;&#xFF0C;&#x4E5F;&#x5F88;&#x5BB9;&#x6613;&#x5FD8;&#x8BB0;&#x8D4B;&#x503C;&#x3002;</p>
<p>&#x5F53;&#x4F7F;&#x7528;&#x5916;&#x90E8;&#x5E93;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4E00;&#x822C;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x539F;&#x751F;&#x5BF9;&#x8C61;&#xFF0C;&#x4E5F;&#x5F88;&#x5BB9;&#x6613;&#x5FD8;&#x8BB0;&#x8F6C;&#x6362;&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x7ED9;&#x51FA;&#x4E00;&#x4E9B;&#x529E;&#x6CD5;&#x6765;&#x907F;&#x514D;&#x7C7B;&#x4F3C;&#x95EE;&#x9898;&#x53D1;&#x751F;&#xFF1A;</p>
<p>&#x4F7F;&#x7528; Flow &#x6216; TypeScript &#x8FD9;&#x7C7B;&#x6709;&#x9759;&#x6001;&#x7C7B;&#x578B;&#x68C0;&#x67E5;&#x7684;&#x5DE5;&#x5177;
&#x7EA6;&#x5B9A;&#x53D8;&#x91CF;&#x547D;&#x540D;&#x89C4;&#x5219;&#xFF1A;&#x5982;&#x6240;&#x6709; Immutable &#x7C7B;&#x578B;&#x5BF9;&#x8C61;&#x4EE5; $$ &#x5F00;&#x5934;&#x3002;
&#x4F7F;&#x7528; Immutable.fromJS &#x800C;&#x4E0D;&#x662F; Immutable.Map &#x6216; Immutable.List &#x6765;&#x521B;&#x5EFA;&#x5BF9;&#x8C61;&#xFF0C;&#x8FD9;&#x6837;&#x53EF;&#x4EE5;&#x907F;&#x514D; Immutable &#x548C;&#x539F;&#x751F;&#x5BF9;&#x8C61;&#x95F4;&#x7684;&#x6DF7;&#x7528;&#x3002;
&#x66F4;&#x591A;&#x8BA4;&#x8BC6;</p>
<h3 id="t3Immutable.is">Immutable.is <a href="#t3Immutable.is"> # </a></h3>
<p>&#x4E24;&#x4E2A; immutable &#x5BF9;&#x8C61;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; === &#x6765;&#x6BD4;&#x8F83;&#xFF0C;&#x8FD9;&#x6837;&#x662F;&#x76F4;&#x63A5;&#x6BD4;&#x8F83;&#x5185;&#x5B58;&#x5730;&#x5740;&#xFF0C;&#x6027;&#x80FD;&#x6700;&#x597D;&#x3002;&#x4F46;&#x5373;&#x4F7F;&#x4E24;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x503C;&#x662F;&#x4E00;&#x6837;&#x7684;&#xFF0C;&#x4E5F;&#x4F1A;&#x8FD4;&#x56DE; false&#xFF1A;</p>
<pre><code>let map1 = Immutable.Map({a:1, b:1, c:1});
let map2 = Immutable.Map({a:1, b:1, c:1});
map1 === map2;             // false
</code></pre><p>&#x4E3A;&#x4E86;&#x76F4;&#x63A5;&#x6BD4;&#x8F83;&#x5BF9;&#x8C61;&#x7684;&#x503C;&#xFF0C;immutable.js &#x63D0;&#x4F9B;&#x4E86; Immutable.is &#x6765;&#x505A;&#x300E;&#x503C;&#x6BD4;&#x8F83;&#x300F;&#xFF0C;&#x7ED3;&#x679C;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code>Immutable.is(map1, map2);  // true
</code></pre><p>Immutable.is &#x6BD4;&#x8F83;&#x7684;&#x662F;&#x4E24;&#x4E2A;&#x5BF9;&#x8C61;&#x7684; hashCode &#x6216; valueOf&#xFF08;&#x5BF9;&#x4E8E; JavaScript &#x5BF9;&#x8C61;&#xFF09;&#x3002;&#x7531;&#x4E8E; immutable &#x5185;&#x90E8;&#x4F7F;&#x7528;&#x4E86; Trie &#x6570;&#x636E;&#x7ED3;&#x6784;&#x6765;&#x5B58;&#x50A8;&#xFF0C;&#x53EA;&#x8981;&#x4E24;&#x4E2A;&#x5BF9;&#x8C61;&#x7684; hashCode &#x76F8;&#x7B49;&#xFF0C;&#x503C;&#x5C31;&#x662F;&#x4E00;&#x6837;&#x7684;&#x3002;&#x8FD9;&#x6837;&#x7684;&#x7B97;&#x6CD5;&#x907F;&#x514D;&#x4E86;&#x6DF1;&#x5EA6;&#x904D;&#x5386;&#x6BD4;&#x8F83;&#xFF0C;&#x6027;&#x80FD;&#x975E;&#x5E38;&#x597D;&#x3002;</p>
<p>&#x540E;&#x9762;&#x4F1A;&#x4F7F;&#x7528; Immutable.is &#x6765;&#x51CF;&#x5C11; React &#x91CD;&#x590D;&#x6E32;&#x67D3;&#xFF0C;&#x63D0;&#x9AD8;&#x6027;&#x80FD;&#x3002;</p>
<p>&#x53E6;&#x5916;&#xFF0C;&#x8FD8;&#x6709; mori&#x3001;cortex &#x7B49;&#xFF0C;&#x56E0;&#x4E3A;&#x7C7B;&#x4F3C;&#x5C31;&#x4E0D;&#x518D;&#x4ECB;&#x7ECD;&#x3002;</p>
<blockquote>
<p>&#x4E0E; Object.freeze&#x3001;const &#x533A;&#x522B;</p>
</blockquote>
<p>ES6 &#x4E2D;&#x65B0;&#x52A0;&#x5165;&#x7684; Object.freeze &#x548C; const &#x90FD;&#x53EF;&#x4EE5;&#x8FBE;&#x5230;&#x9632;&#x6B62;&#x5BF9;&#x8C61;&#x88AB;&#x7BE1;&#x6539;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x4F46;&#x5B83;&#x4EEC;&#x662F; shallowCopy &#x7684;&#x3002;&#x5BF9;&#x8C61;&#x5C42;&#x7EA7;&#x4E00;&#x6DF1;&#x5C31;&#x8981;&#x7279;&#x6B8A;&#x5904;&#x7406;&#x4E86;&#x3002;</p>
<h2 id="t4Cursor &#x7684;&#x6982;&#x5FF5;">Cursor &#x7684;&#x6982;&#x5FF5; <a href="#t4Cursor &#x7684;&#x6982;&#x5FF5;"> # </a></h2>
<p>&#x8FD9;&#x4E2A; Cursor &#x548C;&#x6570;&#x636E;&#x5E93;&#x4E2D;&#x7684;&#x6E38;&#x6807;&#x662F;&#x5B8C;&#x5168;&#x4E0D;&#x540C;&#x7684;&#x6982;&#x5FF5;&#x3002;</p>
<p>&#x7531;&#x4E8E; Immutable &#x6570;&#x636E;&#x4E00;&#x822C;&#x5D4C;&#x5957;&#x975E;&#x5E38;&#x6DF1;&#xFF0C;&#x4E3A;&#x4E86;&#x4FBF;&#x4E8E;&#x8BBF;&#x95EE;&#x6DF1;&#x5C42;&#x6570;&#x636E;&#xFF0C;Cursor &#x63D0;&#x4F9B;&#x4E86;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x8BBF;&#x95EE;&#x8FD9;&#x4E2A;&#x6DF1;&#x5C42;&#x6570;&#x636E;&#x7684;&#x5F15;&#x7528;&#x3002;</p>
<pre><code>import Immutable from &apos;immutable&apos;;
import Cursor from &apos;immutable/contrib/cursor&apos;;

let data = Immutable.fromJS({ a: { b: { c: 1 } } });
// &#x8BA9; cursor &#x6307;&#x5411; { c: 1 }
let cursor = Cursor.from(data, [&apos;a&apos;, &apos;b&apos;], newData =&gt; {
  // &#x5F53; cursor &#x6216;&#x5176;&#x5B50; cursor &#x6267;&#x884C; update &#x65F6;&#x8C03;&#x7528;
  console.log(newData);
});

cursor.get(&apos;c&apos;); // 1
cursor = cursor.update(&apos;c&apos;, x =&gt; x + 1);
cursor.get(&apos;c&apos;); // 2
</code></pre><h2 id="t5&#x4E0E; React &#x642D;&#x914D;&#x4F7F;&#x7528;&#xFF0C;Pure Render">&#x4E0E; React &#x642D;&#x914D;&#x4F7F;&#x7528;&#xFF0C;Pure Render <a href="#t5&#x4E0E; React &#x642D;&#x914D;&#x4F7F;&#x7528;&#xFF0C;Pure Render"> # </a></h2>
<p>&#x719F;&#x6089; React &#x7684;&#x90FD;&#x77E5;&#x9053;&#xFF0C;React &#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x65F6;&#x6709;&#x4E00;&#x4E2A;&#x907F;&#x514D;&#x91CD;&#x590D;&#x6E32;&#x67D3;&#x7684;&#x5927;&#x62DB;&#xFF0C;&#x5C31;&#x662F;&#x4F7F;&#x7528; shouldComponentUpdate()&#xFF0C;&#x4F46;&#x5B83;&#x9ED8;&#x8BA4;&#x8FD4;&#x56DE; true&#xFF0C;&#x5373;&#x59CB;&#x7EC8;&#x4F1A;&#x6267;&#x884C; render() &#x65B9;&#x6CD5;&#xFF0C;&#x7136;&#x540E;&#x505A; Virtual DOM &#x6BD4;&#x8F83;&#xFF0C;&#x5E76;&#x5F97;&#x51FA;&#x662F;&#x5426;&#x9700;&#x8981;&#x505A;&#x771F;&#x5B9E; DOM &#x66F4;&#x65B0;&#xFF0C;&#x8FD9;&#x91CC;&#x5F80;&#x5F80;&#x4F1A;&#x5E26;&#x6765;&#x5F88;&#x591A;&#x65E0;&#x5FC5;&#x8981;&#x7684;&#x6E32;&#x67D3;&#x5E76;&#x6210;&#x4E3A;&#x6027;&#x80FD;&#x74F6;&#x9888;&#x3002;</p>
<p>&#x5F53;&#x7136;&#x6211;&#x4EEC;&#x4E5F;&#x53EF;&#x4EE5;&#x5728; shouldComponentUpdate() &#x4E2D;&#x4F7F;&#x7528;&#x4F7F;&#x7528; deepCopy &#x548C; deepCompare &#x6765;&#x907F;&#x514D;&#x65E0;&#x5FC5;&#x8981;&#x7684; render()&#xFF0C;&#x4F46; deepCopy &#x548C; deepCompare &#x4E00;&#x822C;&#x90FD;&#x662F;&#x975E;&#x5E38;&#x8017;&#x6027;&#x80FD;&#x7684;&#x3002;</p>
<p>Immutable &#x5219;&#x63D0;&#x4F9B;&#x4E86;&#x7B80;&#x6D01;&#x9AD8;&#x6548;&#x7684;&#x5224;&#x65AD;&#x6570;&#x636E;&#x662F;&#x5426;&#x53D8;&#x5316;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x53EA;&#x9700; === &#x548C; is &#x6BD4;&#x8F83;&#x5C31;&#x80FD;&#x77E5;&#x9053;&#x662F;&#x5426;&#x9700;&#x8981;&#x6267;&#x884C; render()&#xFF0C;&#x800C;&#x8FD9;&#x4E2A;&#x64CD;&#x4F5C;&#x51E0;&#x4E4E; 0 &#x6210;&#x672C;&#xFF0C;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x6781;&#x5927;&#x63D0;&#x9AD8;&#x6027;&#x80FD;&#x3002;&#x4FEE;&#x6539;&#x540E;&#x7684; shouldComponentUpdate &#x662F;&#x8FD9;&#x6837;&#x7684;&#xFF1A;</p>
<pre><code>import { is } from &apos;immutable&apos;;
shouldComponentUpdate: (nextProps, nextState) =&gt; {
  return !(this.props === nextProps || is(this.props, nextProps)) ||
         !(this.state === nextState || is(this.state, nextState));
}
</code></pre><p>&#x4F7F;&#x7528; Immutable &#x540E;&#xFF0C;&#x5982;&#x4E0B;&#x56FE;&#xFF0C;&#x5F53;&#x7EA2;&#x8272;&#x8282;&#x70B9;&#x7684; state &#x53D8;&#x5316;&#x540E;&#xFF0C;&#x4E0D;&#x4F1A;&#x518D;&#x6E32;&#x67D3;&#x6811;&#x4E2D;&#x7684;&#x6240;&#x6709;&#x8282;&#x70B9;&#xFF0C;&#x800C;&#x662F;&#x53EA;&#x6E32;&#x67D3;&#x56FE;&#x4E2D;&#x7EFF;&#x8272;&#x7684;&#x90E8;&#x5206;&#xFF1A;</p>
<p>react reconciliation</p>
<p>&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x501F;&#x52A9; React.addons.PureRenderMixin &#x6216;&#x652F;&#x6301; class &#x8BED;&#x6CD5;&#x7684; pure-render-decorator &#x6765;&#x5B9E;&#x73B0;&#x3002;</p>
<blockquote>
<p>setState &#x7684;&#x4E00;&#x4E2A;&#x6280;&#x5DE7;</p>
</blockquote>
<p>React &#x5EFA;&#x8BAE;&#x628A; this.state &#x5F53;&#x4F5C; Immutable &#x7684;&#xFF0C;&#x56E0;&#x6B64;&#x4FEE;&#x6539;&#x524D;&#x9700;&#x8981;&#x505A;&#x4E00;&#x4E2A; deepCopy&#xFF0C;&#x663E;&#x5F97;&#x9EBB;&#x70E6;&#xFF1A;</p>
<pre><code>import &apos;_&apos; from &apos;lodash&apos;;

const Component = React.createClass({
  getInitialState() {
    return {
      data: { times: 0 }
    }
  },
  handleAdd() {
    let data = _.cloneDeep(this.state.data);
    data.times = data.times + 1;
    this.setState({ data: data });
    // &#x5982;&#x679C;&#x4E0A;&#x9762;&#x4E0D;&#x505A; cloneDeep&#xFF0C;&#x4E0B;&#x9762;&#x6253;&#x5370;&#x7684;&#x7ED3;&#x679C;&#x4F1A;&#x662F;&#x5DF2;&#x7ECF;&#x52A0; 1 &#x540E;&#x7684;&#x503C;&#x3002;
    console.log(this.state.data.times);
  }
}
</code></pre><p>&#x4F7F;&#x7528; Immutable &#x540E;&#xFF1A;</p>
<pre><code>  getInitialState() {
    return {
      data: Map({ times: 0 })
    }
  },
  handleAdd() {
    this.setState({ data: this.state.data.update(&apos;times&apos;, v =&gt; v + 1) });
    // &#x8FD9;&#x65F6;&#x7684; times &#x5E76;&#x4E0D;&#x4F1A;&#x6539;&#x53D8;
    console.log(this.state.data.get(&apos;times&apos;));
  }
</code></pre><p>&#x4E0A;&#x9762;&#x7684; handleAdd &#x53EF;&#x4EE5;&#x7B80;&#x5199;&#x6210;&#xFF1A;</p>
<pre><code>  handleAdd() {
    this.setState(({data}) =&gt; ({
      data: data.update(&apos;times&apos;, v =&gt; v + 1) })
    });
  }
</code></pre><h2 id="t6&#x4E0E; Flux &#x642D;&#x914D;&#x4F7F;&#x7528;">&#x4E0E; Flux &#x642D;&#x914D;&#x4F7F;&#x7528; <a href="#t6&#x4E0E; Flux &#x642D;&#x914D;&#x4F7F;&#x7528;"> # </a></h2>
<p>&#x7531;&#x4E8E; Flux &#x5E76;&#x6CA1;&#x6709;&#x9650;&#x5B9A; Store &#x4E2D;&#x6570;&#x636E;&#x7684;&#x7C7B;&#x578B;&#xFF0C;&#x4F7F;&#x7528; Immutable &#x975E;&#x5E38;&#x7B80;&#x5355;&#x3002;</p>
<p>&#x73B0;&#x5728;&#x662F;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x7C7B;&#x4F3C;&#x5E26;&#x6709;&#x6DFB;&#x52A0;&#x548C;&#x64A4;&#x9500;&#x529F;&#x80FD;&#x7684; Store&#xFF1A;</p>
<pre><code class="lang-JavaScript"><span class="hljs-keyword">import</span> { Map, OrderedMap } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;immutable&apos;</span>;
<span class="hljs-keyword">let</span> todos = OrderedMap();
<span class="hljs-keyword">let</span> history = [];  <span class="hljs-comment">// &#x666E;&#x901A;&#x6570;&#x7EC4;&#xFF0C;&#x5B58;&#x653E;&#x6BCF;&#x6B21;&#x64CD;&#x4F5C;&#x540E;&#x4EA7;&#x751F;&#x7684;&#x6570;&#x636E;</span>

<span class="hljs-keyword">let</span> TodoStore = createStore({
  getAll() { <span class="hljs-keyword">return</span> todos; }
});

Dispatcher.register(action =&gt; {
  <span class="hljs-keyword">if</span> (action.actionType === <span class="hljs-string">&apos;create&apos;</span>) {
    <span class="hljs-keyword">let</span> id = createGUID();
    history.push(todos);  <span class="hljs-comment">// &#x8BB0;&#x5F55;&#x5F53;&#x524D;&#x64CD;&#x4F5C;&#x524D;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4FBF;&#x4E8E;&#x64A4;&#x9500;</span>
    todos = todos.set(id, <span class="hljs-built_in">Map</span>({
      id: id,
      complete: <span class="hljs-literal">false</span>,
      text: action.text.trim()
    }));
    TodoStore.emitChange();
  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (action.actionType === <span class="hljs-string">&apos;undo&apos;</span>) {
    <span class="hljs-comment">// &#x8FD9;&#x91CC;&#x662F;&#x64A4;&#x9500;&#x529F;&#x80FD;&#x5B9E;&#x73B0;&#xFF0C;</span>
    <span class="hljs-comment">// &#x53EA;&#x9700;&#x4ECE; history &#x6570;&#x7EC4;&#x4E2D;&#x53D6;&#x524D;&#x4E00;&#x6B21; todos &#x5373;&#x53EF;</span>
    <span class="hljs-keyword">if</span> (history.length &gt; <span class="hljs-number">0</span>) {
      todos = history.pop();
    }
    TodoStore.emitChange();
  }
});
</code></pre>
<h2 id="t7&#x4E0E; Redux &#x642D;&#x914D;&#x4F7F;&#x7528;">&#x4E0E; Redux &#x642D;&#x914D;&#x4F7F;&#x7528; <a href="#t7&#x4E0E; Redux &#x642D;&#x914D;&#x4F7F;&#x7528;"> # </a></h2>
<p>Redux &#x662F;&#x76EE;&#x524D;&#x6D41;&#x884C;&#x7684; Flux &#x884D;&#x751F;&#x5E93;&#x3002;&#x5B83;&#x7B80;&#x5316;&#x4E86; Flux &#x4E2D;&#x591A;&#x4E2A; Store &#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x53EA;&#x6709;&#x4E00;&#x4E2A; Store&#xFF0C;&#x6570;&#x636E;&#x64CD;&#x4F5C;&#x901A;&#x8FC7; Reducer &#x4E2D;&#x5B9E;&#x73B0;&#xFF1B;&#x540C;&#x65F6;&#x5B83;&#x63D0;&#x4F9B;&#x66F4;&#x7B80;&#x6D01;&#x548C;&#x6E05;&#x6670;&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#xFF08;View -&gt; Action -&gt; Middleware -&gt; Reducer&#xFF09;&#xFF0C;&#x4E5F;&#x66F4;&#x6613;&#x4E8E;&#x5F00;&#x53D1;&#x540C;&#x6784;&#x5E94;&#x7528;&#x3002;&#x76EE;&#x524D;&#x5DF2;&#x7ECF;&#x5728;&#x6211;&#x4EEC;&#x9879;&#x76EE;&#x4E2D;&#x5927;&#x89C4;&#x6A21;&#x4F7F;&#x7528;&#x3002;</p>
<p>&#x7531;&#x4E8E; Redux &#x4E2D;&#x5185;&#x7F6E;&#x7684; combineReducers &#x548C; reducer &#x4E2D;&#x7684; initialState &#x90FD;&#x4E3A;&#x539F;&#x751F;&#x7684; Object &#x5BF9;&#x8C61;&#xFF0C;&#x6240;&#x4EE5;&#x4E0D;&#x80FD;&#x548C; Immutable &#x539F;&#x751F;&#x642D;&#x914D;&#x4F7F;&#x7528;&#x3002;</p>
<p>&#x5E78;&#x8FD0;&#x7684;&#x662F;&#xFF0C;Redux &#x5E76;&#x4E0D;&#x6392;&#x65A5;&#x4F7F;&#x7528; Immutable&#xFF0C;&#x53EF;&#x4EE5;&#x81EA;&#x5DF1;&#x91CD;&#x5199; combineReducers &#x6216;&#x4F7F;&#x7528; redux-immutablejs &#x6765;&#x63D0;&#x4F9B;&#x652F;&#x6301;&#x3002;</p>
<p>&#x4E0A;&#x9762;&#x6211;&#x4EEC;&#x63D0;&#x5230; Cursor &#x53EF;&#x4EE5;&#x65B9;&#x4FBF;&#x68C0;&#x7D22;&#x548C; update &#x5C42;&#x7EA7;&#x6BD4;&#x8F83;&#x6DF1;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4F46;&#x56E0;&#x4E3A; Redux &#x4E2D;&#x5DF2;&#x7ECF;&#x6709;&#x4E86; select &#x6765;&#x505A;&#x68C0;&#x7D22;&#xFF0C;Action &#x6765;&#x66F4;&#x65B0;&#x6570;&#x636E;&#xFF0C;&#x56E0;&#x6B64; Cursor &#x5728;&#x8FD9;&#x91CC;&#x5C31;&#x6CA1;&#x6709;&#x7528;&#x6B66;&#x4E4B;&#x5730;&#x4E86;&#x3002;</p>
<h2 id="t8&#x603B;&#x7ED3;">&#x603B;&#x7ED3; <a href="#t8&#x603B;&#x7ED3;"> # </a></h2>
<p>Immutable &#x53EF;&#x4EE5;&#x7ED9;&#x5E94;&#x7528;&#x5E26;&#x6765;&#x6781;&#x5927;&#x7684;&#x6027;&#x80FD;&#x63D0;&#x5347;&#xFF0C;&#x4F46;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x8FD8;&#x8981;&#x770B;&#x9879;&#x76EE;&#x60C5;&#x51B5;&#x3002;&#x7531;&#x4E8E;&#x4FB5;&#x5165;&#x6027;&#x8F83;&#x5F3A;&#xFF0C;&#x65B0;&#x9879;&#x76EE;&#x5F15;&#x5165;&#x6BD4;&#x8F83;&#x5BB9;&#x6613;&#xFF0C;&#x8001;&#x9879;&#x76EE;&#x8FC1;&#x79FB;&#x9700;&#x8981;&#x8BC4;&#x4F30;&#x8FC1;&#x79FB;&#x3002;&#x5BF9;&#x4E8E;&#x4E00;&#x4E9B;&#x63D0;&#x4F9B;&#x7ED9;&#x5916;&#x90E8;&#x4F7F;&#x7528;&#x7684;&#x516C;&#x5171;&#x7EC4;&#x4EF6;&#xFF0C;&#x6700;&#x597D;&#x4E0D;&#x8981;&#x628A; Immutable &#x5BF9;&#x8C61;&#x76F4;&#x63A5;&#x66B4;&#x9732;&#x5728;&#x5BF9;&#x5916;&#x63A5;&#x53E3;&#x4E2D;&#x3002;</p>
<p>&#x5982;&#x679C; JS &#x539F;&#x751F; Immutable &#x7C7B;&#x578B;&#x4F1A;&#x4E0D;&#x4F1A;&#x592A;&#x7F8E;&#xFF0C;&#x88AB;&#x79F0;&#x4E3A; React API &#x7EC8;&#x7ED3;&#x8005;&#x7684; Sebastian Markb&#xE5;ge &#x6709;&#x4E00;&#x4E2A;&#x8FD9;&#x6837;&#x7684;&#x63D0;&#x6848;&#xFF0C;&#x80FD;&#x5426;&#x901A;&#x8FC7;&#x73B0;&#x5728;&#x8FD8;&#x4E0D;&#x786E;&#x5B9A;&#x3002;&#x4E0D;&#x8FC7;&#x53EF;&#x4EE5;&#x80AF;&#x5B9A;&#x7684;&#x662F; Immutable &#x4F1A;&#x88AB;&#x8D8A;&#x6765;&#x8D8A;&#x591A;&#x7684;&#x9879;&#x76EE;&#x4F7F;&#x7528;&#x3002;</p>
<h2 id="t9&#x8D44;&#x6E90;">&#x8D44;&#x6E90; <a href="#t9&#x8D44;&#x6E90;"> # </a></h2>
<ul>
<li>Lee Byron - Immutable Data and React</li>
<li>Immutable Data Structures and JavaScript</li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
